File: /home/sioberen/public_html/cache/template_complete.php
<?php
/**
* ===================================================================
* PRODUCT DETAIL - COMPLETE RENDER TEMPLATE (V2)
* ===================================================================
* This is the main view file for displaying a single product.
* It is dynamically populated by `product.php`, which prepares the $data array.
* This version restores all UI components from the user's original design.
*
* @var array $data The associative array containing all product details.
* ===================================================================
*/
// The $data variable is provided by product.php.
// The following functions prepare data specifically for this template's needs.
?>
<!DOCTYPE html>
<html lang="en">
<head prefix="og: https://ogp.me/ns#">
<meta charset="utf-8">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#ffffff">
<meta name="robots" content="index,follow">
<!-- Favicon -->
<link rel="icon" type="image/png" href="<?php echo htmlspecialchars($data['favicon_path']); ?>">
<link rel="shortcut icon" type="image/png" href="<?php echo htmlspecialchars($data['favicon_path']); ?>">
<link rel="apple-touch-icon" href="<?php echo htmlspecialchars($data['favicon_path']); ?>">
<title><?php echo htmlspecialchars($data['title']); ?></title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "<?php echo htmlspecialchars($data['title']); ?>",
"brand": {
"@type": "Brand",
"name": "<?php echo htmlspecialchars($data['domain']); ?>",
"logo": "<?php echo htmlspecialchars($data['favicon_path']); ?>"
},
"category": "<?php echo htmlspecialchars(end($data['categories'])); ?>",
"image": "<?php echo htmlspecialchars($data['default_image']); ?>",
"description": "<?php echo htmlspecialchars(strip_tags($data['description'])); ?>",
"sku": "<?php echo $data['management_number'] + ID_OFFSET; ?>",
"offers": {
"@type": "Offer",
"url": "<?php echo buildProductUrl($data['management_number'], isset($data['title']) ? $data['title'] : null); ?>",
"priceCurrency": "<?php echo $data['currency']; ?>",
"price": "<?php echo preg_replace('/[^0-9.]/', '', isset($data['price']['used']) ? $data['price']['used'] : $data['price']['new']); ?>",
"availability": "https://schema.org/InStock"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "<?php echo $data['rating']['score']; ?>",
"reviewCount": "<?php echo $data['rating']['count']; ?>"
}
}
</script>
<meta name="Keywords" content="<?php echo htmlspecialchars($data['title']); ?>">
<meta name="Description" content="<?php echo htmlspecialchars(strip_tags($data['description'])); ?>">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<?php echo htmlspecialchars($data['domain']); ?>">
<link rel="canonical" href="<?php echo buildProductUrl($data['management_number'], isset($data['title']) ? $data['title'] : null); ?>">
<meta http-equiv="Content-Script-Type" content="text/JavaScript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta property="og:url" content="<?php echo buildProductUrl($data['management_number'], isset($data['title']) ? $data['title'] : null); ?>">
<meta property="og:type" content="product">
<meta property="og:title" content="<?php echo htmlspecialchars($data['title']); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars(strip_tags($data['description'])); ?>">
<meta property="og:site_name" content="<?php echo htmlspecialchars($data['domain']); ?>">
<meta property="og:image" content="<?php echo htmlspecialchars($data['default_image']); ?>">
<!-- External CSS and JS Dependencies -->
<link rel="stylesheet" media="all" href="//cdn.suruga-ya.jp/drupal/sites/default/files/css/css_YLUY2usEybPXqNO15-ozAgAYsZmniqhrU6f3bp69-r4.css">
<link rel="stylesheet" media="all" href="//cdn.suruga-ya.jp/drupal/sites/default/files/css/css_LmUrbIckCDCKvN2_Q3zbp044aJ28BPsL4EcroazBk2w.css">
<script src="//cdn.suruga-ya.jp/drupal/sites/default/files/js/js_G878YGhv0pYpg9iZ_hIm3vCCQWyhWgLawk-6b6wmZuU.js"></script>
<link href="//cdn.suruga-ya.jp/styles/css/lightbox.min.css" rel="stylesheet" type="text/css">
<link href="//cdn.suruga-ya.jp/styles/css/product-detail-ex01.css" rel="stylesheet" type="text/css">
<link href="//cdn.suruga-ya.jp/styles/css/wanderer-fg.css" rel="stylesheet" type="text/css">
<script src="//cdn.suruga-ya.jp/styles/js/lazysizes.min.js" type="text/javascript" async></script>
<script src="//cdn.suruga-ya.jp/styles/js/lightbox.js" type="text/javascript"></script>
</head>
<body class="bg_white_body default_font">
<div class="dialog-off-canvas-main-canvas">
<?php
// These includes are part of the new template. We assume they exist.
// If they are missing, they will fail gracefully without breaking the page.
@include 'includes/header_complete.php';
?>
<div class="d-flex">
<?php
@include 'includes/sidebar_complete.php';
?>
<div class="container_suru padB40 flex-grow-1">
<div data-drupal-messages-fallback="" class="hidden"></div>
<link rel="stylesheet" href="//cdn.suruga-ya.jp/drupal/modules/product_detail/assets/css/new_pc_product_detail.css" media="all">
<div class="row">
<div class="col-4" style="min-height: 24px;">
<div id="tag-product-head" style="display: block;">
<span class="tag_product red-head">New</span>
<span class="tag_product purple-head">Arrivals/Restock</span>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<?php if (!empty($data['images'])): ?>
<div class="product-images-gallery">
<a href="<?php echo htmlspecialchars($data['images'][0]); ?>" rel="lightbox">
<img src="<?php echo htmlspecialchars($data['images'][0]); ?>" alt="<?php echo htmlspecialchars($data['title']); ?>" style="width:100%; border: 1px solid #ccc;">
</a>
<div class="thumbnails" style="margin-top:10px;">
<?php foreach($data['images'] as $index => $image): ?>
<?php if($index > 0): ?>
<a href="<?php echo htmlspecialchars($image); ?>" rel="lightbox">
<img src="<?php echo htmlspecialchars($image); ?>" alt="<?php echo htmlspecialchars($data['title']); ?>" style="width: 24%; border: 1px solid #ccc;">
</a>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
<div class="col-8 padL32">
<div class="zoom_window"></div>
<div class="d-flex justify-content-start">
<div class="w-70 pr-5">
<h1 class="h1_title_product" id="item_title"><?php echo htmlspecialchars($data['title']); ?></h1>
<div id="naviplus-review-list-5" class="mb-4">
<div class="navi-review-review-rate navi-review-rate-and-total-count1">
<div class="navi-review-average-star">
<span class="navi-review-rate" data-rate="<?php echo $data['rating']['score']; ?>">
<?php for ($i = 1; $i <= 5; $i++) { echo '<img src="https://rvw.snva.jp/images/widget/star-' . ($i <= floor($data['rating']['score']) ? 'on' : 'off') . '.png"> '; } ?>
</span>
<?php echo $data['rating']['score']; ?> <span>(<?php echo $data['rating']['count']; ?> items)</span>
</div>
</div>
</div>
<div class="flash_sale d-flex justify-content-between border"><div class="d-flex align-items-center justify-content-start flash_sale_title"><img src="https://cdn.suruga-ya.jp/pics_webp/common/pc/flash_sale.png.webp" alt="flash sale icon" width="24px;">Limited Time Sale</div><div class="d-flex justify-content-between align-items-center flash_sale_time"><div class="padR12">Until the end</div><div class="d-flex justify-content-between time_sale"><div class="hours" id="countdown-hours"><?php echo str_pad(rand(0, 23), 2, '0', STR_PAD_LEFT); ?></div><div class="minutes" id="countdown-minutes"><?php echo str_pad(rand(0, 59), 2, '0', STR_PAD_LEFT); ?></div><div class="seconds" id="countdown-seconds"><?php echo str_pad(rand(0, 59), 2, '0', STR_PAD_LEFT); ?></div></div></div></div>
<div class="price_group mb-2">
<div class="item-price form-inline">
<div class="form-check align-items-baseline">
<input value="0001" checked="" id="0001-2" name="grade" type="radio" class="form-check-input" data-price-label="New" data-price-value="<?php echo htmlspecialchars($data['price']['new']); ?>">
<label class="mgnB0 d-block" for="0001-2">New
<span class="text-price-detail price-buy"><?php echo $data['price']['new']; ?> (tax included)</span>
<span class="tag_product blue-light"><span>Number of stocks: 1</span></span>
</label>
</div>
</div>
<div class="item-price form-inline">
<div class="form-check align-items-baseline">
<input value="0001" id="0001-1" name="grade" type="radio" class="form-check-input" data-price-label="Used" data-price-value="<?php echo htmlspecialchars($data['price']['used']); ?>">
<label class="mgnB0 d-block" for="0001-1">Used
<span class="text-price-detail price-buy"><?php echo $data['price']['used']; ?> (tax included)</span>
<span class="tag_product purple"><span>New Arrivals and Restocks</span></span>
<span class="tag_product blue-light"><span>Number in stock: 1</span></span>
</label>
</div>
</div>
</div>
<?php if ($data['price_difference'] > 0): ?>
<div class="product_note mgnB0"><p class="mgnB0">$<?php echo htmlspecialchars($data['price_difference']); ?> cheaper than the new price!!</p></div>
<?php endif; ?>
<div class="mgnT12"><div class="ticket_red"><span class="shipping_comission_fee_text">Free shipping for purchases over $99 ( <a href="<?php echo htmlspecialchars($data['random_link']); ?>" style="color: #007bff">Details</a> ) <br>Free cash-on-delivery fees for purchases over $99</span></div></div>
<div class="link-group mgnT12">
<ul class="list-unstyled mb-0 list-p3"><li><a href="<?php echo htmlspecialchars($data['random_link']); ?>" class="link_underline">Other shops (12) <span class="text-red">$99 ~</span></a></li></ul>
</div>
<div class="mt-3 offer_store_list"><div class="link-group all_stores more_store"><div class="more_less" style="">See all stores</div></div></div>
<div class="mt-3 note_info">Please note that the sales price and tax displayed may differ between online and in-store. Also, the product may be out of stock in-store.</div>
</div>
<div class="w-280px">
<?php @include 'includes/purchase_panel_complete.php'; ?>
</div>
</div>
</div>
</div>
<!-- Product Details -->
<div class="row" id="item_detailInfo">
<div class="col-12">
<h3 class="border-top mt-5 pt-4 green_header mgnB12">Product details</h3>
<table class="table table-striped tbl_product_info">
<tbody>
<tr>
<th class="text-right">Management number</th>
<td><?php echo htmlspecialchars($data['management_number'] + ID_OFFSET); ?></td>
<th class="text-right">Release Date</th>
<td><?php echo htmlspecialchars($data['release_date']); ?></td>
<th class="text-right">List Price</th>
<td><?php echo htmlspecialchars($data['list_price']); ?></td>
<th class="text-right">Model Number</th>
<td><?php echo htmlspecialchars($data['model_number'] + ID_OFFSET); ?></td>
</tr>
<tr>
<th class="text-right" width="100px">Category</th>
<td colspan="9">
<ol class="breadcrumb chevron-double bg-transparent p-0">
<?php foreach ($data['breadcrumb_links'] as $link): ?>
<li class="breadcrumb-item">
<a class="link_underline" href="<?php echo htmlspecialchars($link['url']); ?>"><?php echo htmlspecialchars($link['name']); ?></a>
</li>
<?php endforeach; ?>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-12">
<div>
<?php echo $data['description']; // This contains HTML, so we don't escape it ?>
</div>
<div class="product-detail-ex">
<?php if (!empty($data['images'])): ?>
<?php foreach ($data['images'] as $image): ?>
<p class="img-wrapper" style="display:inline-block; width: 49%;">
<a href="<?php echo htmlspecialchars($image); ?>" rel="lightbox">
<img class="lazyload" data-src="<?php echo htmlspecialchars($image); ?>" alt="<?php echo htmlspecialchars($data['title']); ?>" style="width:100%">
</a>
</p>
<?php endforeach; ?>
<?php endif; ?>
</div>
<hr>
</div>
</div>
<div class="row">
<div class="col-12">
<?php @include 'includes/related_products.php'; ?>
</div>
</div>
<div class="row"><div class="col-12"><h3 class="h3_header mt-3 mgnB12 border-top pt-4">Correction of product information</h3><p>If you notice any omissions or errors in the product information on this page, please use the correction request form below.</p><a href="<?php echo htmlspecialchars(array_pop($data['template_links'])); ?>" class="btn btn-gray btn-icon padT4 padB4 product_edit_btn"><i class="bi bi-pencil-square top3"></i>Correction Request Form</a></div></div>
<?php @include 'includes/product_reviews.php'; ?>
</div>
</div>
<?php
@include 'includes/modals.php';
@include 'includes/footer_complete.php';
@include 'includes/scripts_complete.php';
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
const hoursElem = document.getElementById('countdown-hours');
const minutesElem = document.getElementById('countdown-minutes');
const secondsElem = document.getElementById('countdown-seconds');
if (hoursElem && minutesElem && secondsElem) {
let totalSeconds =
parseInt(hoursElem.textContent, 10) * 3600 +
parseInt(minutesElem.textContent, 10) * 60 +
parseInt(secondsElem.textContent, 10);
if (totalSeconds > 0) {
const countdownInterval = setInterval(function() {
if (totalSeconds <= 0) {
clearInterval(countdownInterval);
hoursElem.textContent = '00';
minutesElem.textContent = '00';
secondsElem.textContent = '00';
return;
}
totalSeconds--;
let hours = Math.floor(totalSeconds / 3600);
let minutes = Math.floor((totalSeconds % 3600) / 60);
let seconds = totalSeconds % 60;
hoursElem.textContent = String(hours).padStart(2, '0');
minutesElem.textContent = String(minutes).padStart(2, '0');
secondsElem.textContent = String(seconds).padStart(2, '0');
}, 1000);
}
}
// --- Dynamic Price Update Logic ---
const priceDisplayPanel = document.querySelector('.selected_price .price-buy');
const priceLabelPanel = document.querySelector('.selected_price');
const priceRadios = document.querySelectorAll('input[name="grade"]');
const priceDifferenceDisplay = document.querySelector('.product_note.mgnB0 p');
// Store original values for price difference calculation
const newPriceValue = parseFloat(`<?php echo $product['price_original']; ?>`);
const usedPriceValue = parseFloat(`<?php echo $product['price_current']; ?>`);
function updatePrice(event) {
const selectedRadio = event.target;
const priceLabel = selectedRadio.getAttribute('data-price-label');
const priceValue = selectedRadio.getAttribute('data-price-value');
if (priceDisplayPanel && priceLabelPanel) {
priceDisplayPanel.textContent = `${priceValue} (tax included)`;
// Update the "New" or "Used" label text
priceLabelPanel.firstChild.nodeValue = `${priceLabel} `;
}
// Update the "cheaper than" message
if (priceDifferenceDisplay) {
let difference = 0;
if (priceLabel === 'Used') {
difference = newPriceValue - usedPriceValue;
}
// You can add logic for other labels if needed.
// If 'New' is selected, the message should probably be hidden.
if (difference > 0) {
priceDifferenceDisplay.textContent = `$${difference.toFixed(2)} cheaper than the new price!!`;
priceDifferenceDisplay.parentElement.style.display = 'block';
} else {
priceDifferenceDisplay.parentElement.style.display = 'none';
}
}
}
priceRadios.forEach(radio => radio.addEventListener('change', updatePrice));
// Set initial state for the "cheaper than" message
const initialSelectedRadio = document.querySelector('input[name="grade"]:checked');
if (initialSelectedRadio && initialSelectedRadio.getAttribute('data-price-label') !== 'Used') {
if(priceDifferenceDisplay) {
priceDifferenceDisplay.parentElement.style.display = 'none';
}
}
});
</script>
</div>
</body>
</html>